<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 选择器示例</title>
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
        .active {
            color: red;
        }
    </style>
</head>
<body>

<!-- 基础选择器 -->
<p>这是一个段落。</p>
<p class="highlight">这个段落被突出显示。</p>
<div id="myDiv">这是一个 div。</div>

<!-- 层次选择器 -->
<div>
    <p>div 内部的段落。</p>
</div>
<h2>标题 2</h2>
<p>这个段落位于标题 2 之后。</p>
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
</ul>

<!-- 过滤选择器 -->
<div class="active">这个 div 是活动的。</div>
<p>这个段落包含一些 Lorem Ipsum 文本。</p>
<div>这个 div 是可见的。</div>

<script>
    // 基础选择器
    var allParagraphs = $("p"); // 选取所有段落元素
    var highlightedElements = $(".highlight"); // 选取所有类为 "highlight" 的元素
    var myDivElement = $("#myDiv"); // 选取所有 ID 为 "myDiv" 的元素

    // 层次选择器
    var childParagraphsOfDiv = $("div > p"); // 选取所有父级为 <div> 元素下的子级 <p> 元素
    var paragraphsAfterH2 = $("h2 + p"); // 选取所有紧接在 <h2> 元素后的 <p> 元素
    var directChildLiOfUl = $("ul > li"); // 选取所有 <ul> 元素下的直接子级 <li> 元素

    // 过滤选择器
    var activeElements = $(".active"); // 选取所有带有 'active' 类的元素
    var loremIpsumElements = $(":contains('Lorem Ipsum')"); // 选取所有含有文本 'Lorem Ipsum' 的元素
    var visibleDivElements = $("div:visible"); // 选取所有可见的 <div> 元素

  /*  */
</script>
</body>
</html>
